<template>
  <div
    class="echart"
    id="echart-bar"
    :style="{ float: 'left', width: '100%', height: '230px' }"
  ></div>
</template>

<script>
import axios from "axios";
import * as echarts from "echarts";
import ENV_URL from "../configs/httpUrl";

const queryData = () => {
  return axios.get(ENV_URL+'/home/admin/req_num');
};

export default {
  mounted() {
    this.initChart('',[],[]);
    this.fetch();
  },
  methods: {
    fetch() {
      queryData().then(({ data }) => {
        if (data && data.data && data.data.list) {
          const xData = [];
          const yData = [];
          data.data.list.forEach(item => {
            xData.push(item.name);
            yData.push(item.num);
          });
          this.initChart("", xData, yData);
        } else {
          this.$message.error("获取数据失败");
        }
      });
    },
    initChart(name, xData, yData) {
      let getchart = echarts.init(document.getElementById("echart-bar"));
      var option = {
        title: {
          left: "center",
          text: "参加人数统计",
        },
        grid: {
          //调整图表上下左右位置
          top: "10%",
          left: "3%",
          right: "8%",
          bottom: "11%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: xData,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: yData,
            type: "bar",
          },
        ],
      };

      getchart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        getchart.resize();
      });
    },
  },
};
</script>
